<template>
    <div :style="{ height }">
        <CarouselCard ref="carouselCardRef" v-if="swiperList.length > 0" :interval="3000" :autoplay="true" :height="height"
            type="card" arrow="always" @change="changeHandle">
            <CarouselCardItem v-for="(item, index) in swiperList" :key="index" :name="`cc_${index}`">
                <div style="height: 100%">
                    <el-image @click="onJump(item.url)" class="rounded" style="width: 100%; height: 100%;transform: scaleX(1.6);" :src="baseUrl + item.image" />
                </div>
            </CarouselCardItem>
        </CarouselCard>
    </div>
</template>
<script setup>
import { CarouselCard, CarouselCardItem } from 'vue-carousel-card'
import './carousel.css'
import { ref, computed, onMounted, watch } from "vue";
import { slideIndex } from "@/http/api";
const props = defineProps({
    height: { type: String, default: '360px' }
});
const swiperList = ref([]);
const baseUrl = import.meta.env.VITE_API_URL;
onMounted(() => {
    getSwiper();
});
const getSwiper = async () => {
    const { data } = await slideIndex();
    console.log(data);
    swiperList.value = data.slide;
};
const changeHandle = function () {

};
</script>
<style scoped>
h1 {
    height: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    background: linear-gradient(90deg, rgba(88, 140, 236, 1), rgba(106, 106, 207, 1))
}
</style>